<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        文章类型
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">

</head>
<body>
<div class="x-nav">
    {#    <span class="layui-breadcrumb">#}
    {#      <a><cite>首页</cite></a>#}
    {#      <a><cite>用户管理</cite></a>#}
    {#      <a><cite>用户列表</cite></a>#}
    {#    </span>#}
    {#    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"#}
    {#       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"#}
    {#                                                                          style="line-height:30px">ဂ</i></a>#}
</div>
<div class="x-body">
    <xblock>
        <form id="query_form" class="layui-form" action="/insect_list" method="get">

            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="layui-inline">
                        <input type="text" name="category_no" id="category_no" value="{{ query.category_no }}"
                               placeholder="编码" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="insect_name" id="category_name" value="{{ query.insect_name }}"
                               placeholder="请输入名称"
                               class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="insect_alias" id="category_alias" value="{{ query.insect_alias }}"
                               placeholder="请输入别名"
                               class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <select name="status" id="status">
                            <option value="-1">请选择状态</option>
                            <option value="1" {% if query.status == 1 %}
                                    selected
                            {% endif %}>启用
                            </option>
                            <option value="2" {% if query.status == 1 %}
                                    selected
                            {% endif %}>禁用
                            </option>
                        </select>
                    </div>
                    <button class="layui-btn" type="submit"><i class="layui-icon">&#xe615;</i>搜索</button>
                </div>
            </div>

        </form>
        <button class="layui-btn" onclick="addBut()"><i class="layui-icon">&#xe608;</i>添加
        </button>
        <span class="x-right" style="line-height:40px">共有数据：<span class="layui-badge">{{ count }}</span> 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>编码</th>
            <th>名称</th>
            <th>目名称</th>
            <th>科名称</th>
            <th>属名称</th>
            <th>拼音</th>
            <th>学名</th>
            <th>别名</th>
            <th>备注</th>
            <th>简介</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for row in data %}
            <tr id="{{ row.id }}" pid="0">
                <td>{{ row.id }}</td>
                <td>{{ row.category_no }}</td>
                <td>{{ row.insect_name }}</td>

                <td>{{ row.lv1 }}</td>
                <td>{{ row.lv2 }}</td>
                <td>{{ row.lv3 }}</td>

                <td>{{ row.insect_spell }}</td>
                <td>{{ row.scientific_name }}</td>
                <td>{{ row.insect_alias }}</td>
                <td>{{ row.insect_remark }}</td>
                <td>{{ row.insect_introduce }}</td>
                {% if row.status == 1 %}
                    <td> 正常</td>
                {% else %}
                    <td> 冻结</td>
                {% endif %}
                <td class="td-manage" title="操作">

                    <a title="编辑" href="javascript:;" onclick="updateBut({{ row.id }})"
                       class="ml-5"
                       style="text-decoration:none"> <i class="layui-icon"></i> </a>

                    <a title="删除" href="javascript:;" onclick="user_del(this, '{{ row.id }}')"
                       style="text-decoration:none"> <i class="layui-icon"></i> </a>
                </td>
            </tr>
        {% endfor %}

        </tbody>
    </table>

    <div id="page123" class="layui-footer" style="margin-bottom: 30px"></div>

</div>
<script src="static/js/jquery.min.js" charset="utf-8"></script>
<!-- 引入 layui.js -->
<script src="static/lib/layui/layuis.js"></script>
<script>

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    var urlLevel = getQueryVariable('level')
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'page123',
            count: {{ count }}, //数据总数，从后端得到
            curr: {{ page }}, //当前页数，从后端得到
            jump: function (obj, first) {
                console.log(obj)
                if (!first) {
                    let queryStr = ''
                    let formParam = $('#query_form').serializeArray();
                    $.each(formParam, function (index, item) {
                        queryStr += '&' + item.name + '=' + item.value
                    });
                    // 发送分页的请求，加载对应页码的数据
                    window.location.href = '/insect_list?page=' + obj.curr + queryStr;
                }
            }
        });
    });

</script>
<script>

    /*添加*/
    var updateFrame = null;

    function addBut() {
        layui.use('layer', function () {
            var layer = layui.layer;
            //iframe层-父子操作
            updateFrame = layer.open({
                title: "新增分类",
                type: 2,
                area: ['70%', '60%'],
                scrollbar: false,	//默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
                maxmin: true,
                content: '/insect_add'
            });
        });

    }

    // 修改
    var updateFrame = null;

    function updateBut(id) {
        layui.use('layer', function () {
            var layer = layui.layer;
            //iframe层-父子操作
            updateFrame = layer.open({
                title: "信息修改",
                type: 2,
                area: ['70%', '60%'],
                scrollbar: false,	//默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
                maxmin: true,
                content: '/insect_edit?id=' + id
            });
        });
    }

    /*删除*/
    function user_del(obj, id) {
        console.log(id)
        layer.confirm('确认要删除吗？', {icon: 3, title: '提示信息'}, function (index) {
            $.ajax({
                type: "post",
                url: "/insect_delete",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    if (data.status == 1) {
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg(data.info, {icon: 6, time: 1000});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                        return false;
                    } else {
                        layer.msg(data.info, {icon: 5, time: 1000});
                        return false;
                    }
                },
                catch(onrejected) {
                }
            });

        });
    }


</script>

</body>
</html>